 <style lang='less' scoped>
            </style>
            <template>
              <div>
                <Row>
                  <Col span='24'>
                    <Card style='margin-bottom: 10px'>
                      <Form inline>
                        <FormItem style='margin-bottom: 0'>
                          <Input v-model='searchConf.keywords' placeholder></Input>
                        </FormItem>
                        <FormItem style='margin-bottom: 0'>
                          <Button
                            type='primary'
                            @click='search'
                          >{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
                        </FormItem>
                      </Form>
                    </Card>
                  </Col>
                </Row>
                <Row>
                  <Col span='24'>
                    <Card>
                      <p slot='title' style='height: 32px'>
                        <Button type='primary' @click='alertAdd' icon='md-add'>{{ $t('add_button') }}</Button>
                      </p>
                      <div>
                        <Table :columns='columnsList' :data='tableData' border disabled-hover></Table>
                      </div>
                      <div class='margin-top-15' style='text-align: center'>
                        <Page
                          :total='tableShow.listCount'
                          :current='tableShow.currentPage'
                          :page-size='tableShow.pageSize'
                          @on-change='changePage'
                          @on-page-size-change='changeSize'
                          show-elevator
                          show-sizer
                          show-total
                        ></Page>
                      </div>
                    </Card>
                  </Col>
                </Row>
                <Modal
                  v-model='modalSetting.show'
                  width='668'
                  @on-visible-change='doCancel'>
                  <p slot='header' style='color:#2d8cf0'>
                    <Icon type='md-alert'></Icon>
                    <span>{{formItem.id ? '编辑' : '新增'}}</span>
                  </p>
                  <Form ref='myForm' :rules='ruleValidate' :model='formItem' :label-width='100'>
                    
                        <FormItem label='项目名称' prop='appname'>
                         <Input v-model='formItem.appname' placeholder='请输入项目名称'></Input>
                       </FormItem>
                  </Form>
                  <div slot='footer'>
                   <Button type='text' @click='cancel' style='margin-right: 8px'>取消</Button>
                   <Button type='primary' @click='submit' :loading='modalSetting.loading'>确定</Button>
                  </div>
                </Modal>
              </div>
            </template>
            <script>
            import { getList, del, add, edit, changeStatus } from '@/api/business/Newapi';
            import { getDate } from '@/libs/tools';
            const editButton = (vm, h, currentRow, index) => {
              return h(
                'Button',
                {
                  props: {
                    type: 'primary'
                  },
                  style: {
                    margin: '0 5px'
                  },
                  on: {
                    click: () => {
                      vm.formItem.id = currentRow.id;
                      vm.formItem.appname = currentRow.appname;
                      vm.formItem.sort = currentRow.sort;
                      vm.modalSetting.show = true;
                      vm.modalSetting.index = index;
                    }
                  }
                },
                vm.$t('edit_button')
              );
            };
            const deleteButton = (vm, h, currentRow, index) => {
              return h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗? ',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      del(currentRow.id).then(response => {
                        vm.tableData.splice(index, 1);
                        vm.$Message.success(response.data.msg);
                      });
                      currentRow.loading = false;
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        margin: '0 5px'
                      },
                      props: {
                        type: 'error',
                        placement: 'top',
                        loading: currentRow.isDeleting
                      }
                    },
                    vm.$t('delete_button')
                  )
                ]
              );
            };
            export default {
              name: 'shop',
              data() {
                return {
                  columnsList: [
                    {
                            title: '项目名称',
                            align: 'center',
                            key:'appname',
                            width: 'auto'
                          },
                    {
                        title: '修改时间',
                        align: 'center',
                        render: (h, params) => {
                          return h('span', params.row.update_time);
                        },
                        width: 200
                      },
                      {
                        title: '创建时间',
                        align: 'center',
                        render: (h, params) => {
                          return h('span', params.row.create_time);
                        },
                        width: 200
                      },
                      {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        render: (h, params) => {
                          return h('div', [
                            editButton(this, h, params.row, params.index),
                            deleteButton(this, h, params.row, params.index)
                          ]);
                        }
                      }
                  ],
                  tableData: [],
                  groupList: [],
                  tableShow: {
                    currentPage: 1,
                    pageSize: 10,
                    listCount: 0
                  },
                  searchConf: {
                    type: '',
                    keywords: '',
                    status: ''
                  },
                  modalSetting: {
                    show: false,
                    loading: false,
                    index: 0
                  },
                  formItem: {
                    id:0,
                    appname:'',
                  },
                  ruleValidate: {
                    appname: [
                        { required: true, message: '项目名称不能为空', trigger: 'blur' }
                    ]
                  }
                };
              },
              created() {
                this.getList();
              },
              methods: {
                alertAdd() {
                  let vm = this;
                  this.modalSetting.show = true;
                },
                submit() {
                  let vm = this;
                  this.$refs['myForm'].validate(valid => {
                    if (valid) {
                      vm.modalSetting.loading = true;
                      if (vm.formItem.id === 0) {
                        add(vm.formItem)
                          .then(response => {
                            vm.$Message.success(response.data.msg);
                            vm.getList();
                            vm.cancel();
                          })
                          .catch(() => {
                            vm.cancel();
                          });
                      } else {
                        edit(vm.formItem)
                          .then(response => {
                            vm.$Message.success(response.data.msg);
                            vm.getList();
                            vm.cancel();
                          })
                          .catch(() => {
                            vm.cancel();
                          });
                      }
                    }
                  });
                },
                cancel() {
                  this.modalSetting.show = false;
                },
                doCancel(data) {
                  if (!data) {
                    this.formItem.id = 0;
                    this.$refs['myForm'].resetFields();
                    this.modalSetting.loading = false;
                    this.modalSetting.index = 0;
                  }
                },
                changePage(page) {
                  this.tableShow.currentPage = page;
                  this.getList();
                },
                changeSize(size) {
                  this.tableShow.pageSize = size;
                  this.getList();
                },
                search() {
                  this.tableShow.currentPage = 1;
                  this.getList();
                },
                getList() {
                  let vm = this;
                  let params = {
                    page: vm.tableShow.currentPage,
                    size: vm.tableShow.pageSize,
                    keywords: vm.searchConf.keywords
                  };
                  getList(params).then(response => {
                    vm.tableData = response.data.data.list;
                    vm.tableShow.listCount = response.data.data.count;
                  });
                }
              }
            };
            </script>